www.gusucode.com > PHP条码扫描管理系统 v1.0PHP源码程序 > PHP条码扫描管理系统 v1.0/wltmglxt_v1.0/wltmglxt_v1.0/upload/protected/modules/pandora/views/default/buttons.php
<!-- RIBBON --> <div id="ribbon"> <span class="ribbon-button-alignment"> <span id="refresh" class="btn btn-ribbon" data-action="resetWidgets" data-title="refresh" rel="tooltip" data-placement="bottom" data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings." data-html="true"> <i class="fa fa-refresh"></i> </span> </span> <!-- breadcrumb --> <ol class="breadcrumb"> <li>Home</li><li>UI Elements</li><li>Buttons</li> </ol> <!-- end breadcrumb --> <!-- You can also add more buttons to the ribbon for further usability Example below: <span class="ribbon-button-alignment pull-right"> <span id="search" class="btn btn-ribbon hidden-xs" data-title="search"><i class="fa-grid"></i> Change Grid</span> <span id="add" class="btn btn-ribbon hidden-xs" data-title="add"><i class="fa-plus"></i> Add</span> <span id="search" class="btn btn-ribbon" data-title="search"><i class="fa-search"></i> <span class="hidden-mobile">Search</span></span> </span> --> </div> <!-- END RIBBON --> <!-- MAIN CONTENT --> <div id="content"> <div class="row"> <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4"> <h1 class="page-title txt-color-blueDark"><i class="fa fa-desktop fa-fw "></i> UI Elements <span>> Buttons </span></h1> </div> <div class="col-xs-12 col-sm-5 col-md-5 col-lg-8"> <ul id="sparks" class=""> <li class="sparks-info"> <h5> My Income <span class="txt-color-blue">$47,171</span></h5> <div class="sparkline txt-color-blue hidden-mobile hidden-md hidden-sm"> 1300, 1877, 2500, 2577, 2000, 2100, 3000, 2700, 3631, 2471, 2700, 3631, 2471 </div> </li> <li class="sparks-info"> <h5> Site Traffic <span class="txt-color-purple"><i class="fa fa-arrow-circle-up" data-rel="bootstrap-tooltip" title="Increased"></i> 45%</span></h5> <div class="sparkline txt-color-purple hidden-mobile hidden-md hidden-sm"> 110,150,300,130,400,240,220,310,220,300, 270, 210 </div> </li> <li class="sparks-info"> <h5> Site Orders <span class="txt-color-greenDark"><i class="fa fa-shopping-cart"></i> 2447</span></h5> <div class="sparkline txt-color-greenDark hidden-mobile hidden-md hidden-sm"> 110,150,300,130,400,240,220,310,220,300, 270, 210 </div> </li> </ul> </div> </div> <!-- widget grid --> <section id="widget-grid" class=""> <!-- row --> <div class="row"> <!-- NEW WIDGET START --> <article class="col-sm-12"> <!-- Widget ID (each widget will need unique ID)--> <div class="jarviswidget well" id="wid-id-0a" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-sortable="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-hand-o-up"></i> </span> <h2>Buttons at a glance </h2> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <!-- This area used as dropdown edit box --> </div> <!-- end widget edit box --> <!-- widget content --> <div class="widget-body"> <h1>Buttons at a glance...</h1> <p> See how aspects of the Bootstrap button system look and feel like at a glance. </p> <div class="table-responsive"> <table class="table table-bordered"> <thead> <tr> <th>Button</th> <th>btn-lg Button</th> <th>Small Button</th> <th>Small Mini</th> <th>Disabled Button</th> <th>Button with Icon</th> <th>Split Button</th> </tr> </thead> <tbody> <tr> <td><a class="btn btn-default" href="javascript:void(0);">Default</a></td> <td><a class="btn btn-default btn-lg" href="javascript:void(0);">Default</a></td> <td><a class="btn btn-default btn-sm" href="javascript:void(0);">Default</a></td> <td><a class="btn btn-default btn-xs" href="javascript:void(0);">Default</a></td> <td><a class="btn btn-default disabled" href="javascript:void(0);">Default</a></td> <td><a class="btn btn-default" href="javascript:void(0);"><i class="fa fa-cog"></i> Default</a></td> <td> <div class="btn-group"> <a class="btn btn-default" href="javascript:void(0);">Default</a> <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div><!-- /btn-group --></td> </tr> <tr> <td><a class="btn btn-primary" href="javascript:void(0);">Primary</a></td> <td><a class="btn btn-primary btn-lg" href="javascript:void(0);">Primary</a></td> <td><a class="btn btn-primary btn-sm" href="javascript:void(0);">Primary</a></td> <td><a class="btn btn-primary btn-xs" href="javascript:void(0);">Primary</a></td> <td><a class="btn btn-primary disabled" href="javascript:void(0);">Primary</a></td> <td><a class="btn btn-primary" href="javascript:void(0);"><i class="fa fa-shopping-cart"></i> Primary</a></td> <td> <div class="btn-group"> <a class="btn btn-primary" href="javascript:void(0);">Primary</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div><!-- /btn-group --></td> </tr> <tr> <td><a class="btn btn-info" href="javascript:void(0);">Info</a></td> <td><a class="btn btn-info btn-lg" href="javascript:void(0);">Info</a></td> <td><a class="btn btn-info btn-sm" href="javascript:void(0);">Info</a></td> <td><a class="btn btn-info btn-xs" href="javascript:void(0);">Info</a></td> <td><a class="btn btn-info disabled" href="javascript:void(0);">Info</a></td> <td><a class="btn btn-info" href="javascript:void(0);"><i class="fa fa-exclamation-sign"></i> Info</a></td> <td> <div class="btn-group"> <a class="btn btn-info" href="javascript:void(0);">Info</a> <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div><!-- /btn-group --></td> </tr> <tr> <td><a class="btn btn-success" href="javascript:void(0);">Success</a></td> <td><a class="btn btn-success btn-lg" href="javascript:void(0);">Success</a></td> <td><a class="btn btn-success btn-sm" href="javascript:void(0);">Success</a></td> <td><a class="btn btn-success btn-xs" href="javascript:void(0);">Success</a></td> <td><a class="btn btn-success disabled" href="javascript:void(0);">Success</a></td> <td><a class="btn btn-success" href="javascript:void(0);"><i class="fa fa-check"></i> Success</a></td> <td> <div class="btn-group"> <a class="btn btn-success" href="javascript:void(0);">Success</a> <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div><!-- /btn-group --></td> </tr> <tr> <td><a class="btn btn-warning" href="javascript:void(0);">Warning</a></td> <td><a class="btn btn-warning btn-lg" href="javascript:void(0);">Warning</a></td> <td><a class="btn btn-warning btn-sm" href="javascript:void(0);">Warning</a></td> <td><a class="btn btn-warning btn-xs" href="javascript:void(0);">Warning</a></td> <td><a class="btn btn-warning disabled" href="javascript:void(0);">Warning</a></td> <td><a class="btn btn-warning" href="javascript:void(0);"><i class="fa fa-warning-sign"></i> Warning</a></td> <td> <div class="btn-group"> <a class="btn btn-warning" href="javascript:void(0);">Warning</a> <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div><!-- /btn-group --></td> </tr> <tr> <td><a class="btn btn-danger" href="javascript:void(0);">Danger</a></td> <td><a class="btn btn-danger btn-lg" href="javascript:void(0);">Danger</a></td> <td><a class="btn btn-danger btn-sm" href="javascript:void(0);">Danger</a></td> <td><a class="btn btn-danger btn-xs" href="javascript:void(0);">Danger</a></td> <td><a class="btn btn-danger disabled" href="javascript:void(0);">Danger</a></td> <td><a class="btn btn-danger" href="javascript:void(0);"><i class="fa fa-remove"></i> Danger</a></td> <td> <div class="btn-group"> <a class="btn btn-danger" href="javascript:void(0);">Danger</a> <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"><span class="caret"></span></a> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div><!-- /btn-group --></td> </tr> </tbody> </table> </div> </div> <!-- end widget content --> </div> <!-- end widget div --> </div> <!-- end widget --> </article> <!-- WIDGET END --> </div> <!-- end row --> <!-- row --> <div class="row"> <!-- NEW WIDGET START --> <article class="col-sm-12 col-md-12 col-lg-6"> <!-- Widget ID (each widget will need unique ID)--> <div class="jarviswidget" id="wid-id-0" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-sortable="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-hand-o-up"></i> </span> <h2>Basic Buttons</h2> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <!-- This area used as dropdown edit box --> </div> <!-- end widget edit box --> <!-- widget content --> <div class="widget-body"> <p class="alert alert-info"> The icons below are the most basic ones, without any icons or additional css applied to it </p> <p> Buttons come in 6 different default color sets <code> .btn .btn-* </code> <code> .btn-default, .btn-primary, .btn-success... etc </code> </p> <a href="javascript:void(0);" class="btn btn-default">Default</a> <a href="javascript:void(0);" class="btn btn-primary">Primary</a> <a href="javascript:void(0);" class="btn btn-success">Success</a> <a href="javascript:void(0);" class="btn btn-info">Info</a> <a href="javascript:void(0);" class="btn btn-warning">Warning</a> <a href="javascript:void(0);" class="btn btn-danger">Danger</a> <a href="javascript:void(0);" class="btn btn-default disabled">Disabled</a> <a href="javascript:void(0);" class="btn btn-link">Link</a> </div> <!-- end widget content --> </div> <!-- end widget div --> </div> <!-- end widget --> <!-- Widget ID (each widget will need unique ID)--> <div class="jarviswidget" id="wid-id-2" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-sortable="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-hand-o-up"></i> </span> <h2>Button Sizes </h2> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <!-- This area used as dropdown edit box --> </div> <!-- end widget edit box --> <!-- widget content --> <div class="widget-body"> <p> Large buttons to attract call to action <code> .btn .btn-lg </code> </p> <a href="javascript:void(0);" class="btn btn-primary btn-lg">Large button</a> <a href="javascript:void(0);" class="btn btn-default btn-lg">Large button</a> <hr class="simple"> <p> The Default button <code> .btn .btn-default </code> </p> <a href="javascript:void(0);" class="btn btn-primary">Default button</a> <a href="javascript:void(0);" class="btn btn-default">Default button</a> <hr class="simple"> <p> Small button for elegance <code> .btn .btn-sm </code> </p> <a href="javascript:void(0);" class="btn btn-primary btn-sm">Small button</a> <a href="javascript:void(0);" class="btn btn-default btn-sm">Small button</a> <hr class="simple"> <p> Extra small button for added info <code> .btn .btn-xs </code> </p> <a href="javascript:void(0);" class="btn btn-primary btn-xs">Mini button</a> <a href="javascript:void(0);" class="btn btn-default btn-xs">Mini button</a> </div> <!-- end widget content --> </div> <!-- end widget div --> </div> <!-- end widget --> <!-- Widget ID (each widget will need unique ID)--> <div class="jarviswidget" id="wid-id-4" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-sortable="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-hand-o-up"></i> </span> <h2>Circle Buttons </h2> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <!-- This area used as dropdown edit box --> </div> <!-- end widget edit box --> <!-- widget content --> <div class="widget-body"> <p> Extra Large round buttons <code> .btn-circle .btn-xl </code> </p> <ul class="demo-btns"> <li> <a href="javascript:void(0);" class="btn btn-primary btn-circle btn-xl"><i class="glyphicon glyphicon-list"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i></a> </li> </ul> <p> Large round buttons <code> .btn-circle .btn-lg </code> </p> <ul class="demo-btns"> <li> <a href="javascript:void(0);" class="btn btn-primary btn-circle btn-lg"><i class="glyphicon glyphicon-list"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default btn-circle btn-lg"><i class="glyphicon glyphicon-ok"></i></a> </li> </ul> <p> Default round buttons <code> .btn-circle </code> </p> <ul class="demo-btns"> <li> <a href="javascript:void(0);" class="btn btn-primary btn-circle"><i class="glyphicon glyphicon-list"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default btn-circle"><i class="glyphicon glyphicon-ok"></i></a> </li> </ul> </div> <!-- end widget content --> </div> <!-- end widget div --> </div> <!-- end widget --> <!-- Widget ID (each widget will need unique ID)--> <div class="jarviswidget" id="wid-id-6" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-sortable="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-hand-o-up"></i> </span> <h2>Drop Down buttons </h2> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <!-- This area used as dropdown edit box --> </div> <!-- end widget edit box --> <!-- widget content --> <div class="widget-body"> <p> Button group with dropup/dropdown toggle <code> .btn-group </code> </p> <div class="btn-group"> <button class="btn btn-primary"> Drop Down </button> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div> <div class="btn-group dropup"> <button class="btn btn-default"> Drop Up </button> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div> <hr class="simple"> <p> Default button dropdowns <code> .dropdown-toggle </code> </p> <div class="btn-group"> <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div> <hr class="simple"> <p> Smaller button dropdowns <code> .btn-sm .dropdown-toggle </code> </p> <div class="btn-group"> <button class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div> <div class="btn-group"> <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div> <hr class="simple"> <p> Extra small button dropdowns <code> .btn-xs .dropdown-toggle </code> </p> <div class="btn-group"> <button class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div> <div class="btn-group"> <button class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Action</a> </li> <li> <a href="javascript:void(0);">Another action</a> </li> <li> <a href="javascript:void(0);">Something else here</a> </li> <li class="divider"></li> <li> <a href="javascript:void(0);">Separated link</a> </li> </ul> </div> <hr class="simple"> <h3>Multiple Level Dropdown <small><span class="label label-warning">New!</span></small></h3> <p> Custom created Multiple Level dropdown that works with ease! Simply use the class <code> .dropdown-menu .multi-level </code> </p> <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="javascript:void(0);"> Multi Level <span class="caret"></span> </a> <ul class="dropdown-menu multi-level" role="menu"> <li> <a href="javascript:void(0);">Some action</a> </li> <li> <a href="javascript:void(0);">Some other action</a> </li> <li class="divider"></li> <li class="dropdown-submenu"> <a tabindex="-1" href="javascript:void(0);">Hover me for more options</a> <ul class="dropdown-menu"> <li> <a tabindex="-1" href="javascript:void(0);">Second level</a> </li> <li class="dropdown-submenu"> <a href="javascript:void(0);">Even More..</a> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">3rd level</a> </li> <li> <a href="javascript:void(0);">3rd level</a> </li> </ul> </li> <li> <a href="javascript:void(0);">Second level</a> </li> <li> <a href="javascript:void(0);">Second level</a> </li> </ul> </li> </ul> </div> </div> <!-- end widget content --> </div> <!-- end widget div --> </div> <!-- end widget --> <!-- Widget ID (each widget will need unique ID)--> <div class="jarviswidget" id="wid-id-8" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-sortable="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-hand-o-up"></i> </span> <h2>Button Groups </h2> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <!-- This area used as dropdown edit box --> </div> <!-- end widget edit box --> <!-- widget content --> <div class="widget-body"> <p> Group a series of buttons together on a single line with the button group. Wrap a series of buttons with <code> .btn </code> in <code> .btn-group </code> . </p> <div class="row"> <div class="col-md-12"> <table class="table table-bordered"> <thead> <tr> <th style="width:25%">Horizontal Group</th> <th style="width:25%">With Icons</th> <th style="width:50%">Multiple Button Groups</th> </tr> </thead> <tbody> <tr> <td> <div class="btn-group"> <button type="button" class="btn btn-default"> Left </button> <button type="button" class="btn btn-default"> Middle </button> <button type="button" class="btn btn-default"> Right </button> </div></td> <td> <div class="btn-group"> <button type="button" class="btn btn-default"> <i class="fa fa-align-left"></i> </button> <button type="button" class="btn btn-default"> <i class="fa fa-align-center"></i> </button> <button type="button" class="btn btn-default"> <i class="fa fa-align-right"></i> </button> <button type="button" class="btn btn-default"> <i class="fa fa-align-justify"></i> </button> </div></td> <td> <div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default"> 1 </button> <button type="button" class="btn btn-default"> 2 </button> <button type="button" class="btn btn-default"> 3 </button> <button type="button" class="btn btn-default"> 4 </button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"> 5 </button> <button type="button" class="btn btn-default"> 6 </button> <button type="button" class="btn btn-default"> 7 </button> </div> <div class="btn-group"> <button type="button" class="btn btn-default"> 8 </button> </div> </div></td> </tr> </tbody> </table> </div> </div> <hr class="simple"> <p> Make a set of buttons appear vertically stacked rather than horizontally by putting it in <code> .btn-group-vertical </code> . </p> <div class="row"> <div class="col-md-12"> <table class="table table-bordered"> <thead> <tr> <th style="width:25%">Vertical Group</th> <th style="width:25%">With Dropdown</th> <th style="width:25%">With Icons</th> <th style="width:25%">Multiple Button Groups</th> </tr> </thead> <tbody> <tr> <td> <div class="btn-group-vertical"> <button type="button" class="btn btn-default"> Top </button> <button type="button" class="btn btn-default"> Middle </button> <button type="button" class="btn btn-default"> Bottom </button> </div></td> <td> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary"> Button 1 </button> <button type="button" class="btn btn-primary"> Button 2 </button> <button type="button" class="btn btn-primary"> Button 3 </button> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown <i class="fa fa-caret-down"></i> </button> <ul class="dropdown-menu"> <li> <a href="javascript:void(0);">Dropdown link</a> </li> <li> <a href="javascript:void(0);">Dropdown link</a> </li> </ul> </div></td> <td> <div class="btn btn-group-vertical"> <a class="btn btn-default" href="javascript:void(0);"><i class="fa fa-align-left"></i></a> <a class="btn btn-default" href="javascript:void(0);"><i class="fa fa-align-center"></i></a> <a class="btn btn-default" href="javascript:void(0);"><i class="fa fa-align-right"></i></a> <a class="btn btn-default" href="javascript:void(0);"><i class="fa fa-align-justify"></i></a> </div></td> <td> <div class="btn-toolbar"> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary"> Page 1 </button> <button type="button" class="btn btn-primary"> Page 2 </button> <button type="button" class="btn btn-primary"> Page 3 </button> <button type="button" class="btn btn-primary"> Page 4 </button> </div> </div></td> </tr> </tbody> </table> </div> </div> </div> <!-- end widget content --> </div> <!-- end widget div --> </div> <!-- end widget --> </article> <!-- WIDGET END --> <!-- NEW WIDGET START --> <article class="col-sm-12 col-md-12 col-lg-6"> <!-- Widget ID (each widget will need unique ID)--> <div class="jarviswidget" id="wid-id-1" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-sortable="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-hand-o-up"></i> </span> <h2> Mix and match colors </h2> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <!-- This area used as dropdown edit box --> </div> <!-- end widget edit box --> <!-- widget content --> <div class="widget-body"> <p class="alert alert-info"> Custom buttons with core CSS elements. Mix and match existing classes to come up with unique style buttons. <strong>For example:</strong> <code> .btn .bg-color-blueLight .txt-color-white </code> </p> <ul class="demo-btns"> <li> <a href="javascript:void(0);" class="btn bg-color-blueLight txt-color-white">.bg-color-blueLight</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-blue txt-color-white">.bg-color-blue</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-teal txt-color-white">.bg-color-teal</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-blueDark txt-color-white">.bg-color-blueDark</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-green txt-color-white">.bg-color-green</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-greenDark txt-color-white">.bg-color-greenDark</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-greenLight txt-color-white">.bg-color-greenLight</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-purple txt-color-white">.bg-color-purple</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-magenta txt-color-white">.bg-color-magenta</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-pink txt-color-white">.bg-color-pink</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-pinkDark txt-color-white">.bg-color-pinkDark</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-yellow txt-color-white">.bg-color-yellow</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-orange txt-color-white">.bg-color-orange</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-red txt-color-white">.bg-color-red</a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-redLight txt-color-white">.bg-color-redLight</a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-dark">.btn-default</a> </li> </ul> </div> <!-- end widget content --> </div> <!-- end widget div --> </div> <!-- end widget --> <!-- Widget ID (each widget will need unique ID)--> <div class="jarviswidget" id="wid-id-3" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-sortable="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-hand-o-up"></i> </span> <h2> Mix and match colors </h2> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <!-- This area used as dropdown edit box --> </div> <!-- end widget edit box --> <!-- widget content --> <div class="widget-body"> <p class="alert alert-info"> Custom text colors can also be applied <strong>For example:</strong> <code> .txt-color-red </code> </p> <ul class="demo-btns"> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-blueLight"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-blue"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-teal"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-blueDark"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-green"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-greenDark"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-greenLight"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-purple"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-magenta"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-pink"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-pinkDark"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-yellow"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-orange"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default txt-color-red"><i class="fa fa-gear fa-lg"></i></a> </li> </ul> <hr class="simple"> <p> Mix and match color with backgrounds <code> .btn .bg-color-blueLight .txt-color-magenta </code> </p> <ul class="demo-btns"> <li> <a href="javascript:void(0);" class="btn bg-color-blueLight txt-color-magenta"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-blueDark txt-color-teal"><i class="fa fa-gear fa-3x"></i></a> </li> <li> <a href="javascript:void(0);" class="btn bg-color-red txt-color-white"><i class="fa fa-gear fa-4x fa-spin"></i></a> </li> </ul> </div> <!-- end widget content --> </div> <!-- end widget div --> </div> <!-- end widget --> <!-- Widget ID (each widget will need unique ID)--> <div class="jarviswidget" id="wid-id-5" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-sortable="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-hand-o-up"></i> </span> <h2>Button with icons </h2> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <!-- This area used as dropdown edit box --> </div> <!-- end widget edit box --> <!-- widget content --> <div class="widget-body"> <p> Default buttons have a single line of text with or without one or two icons aligned left or right. </p> <ul class="demo-btns"> <li> <a href="javascript:void(0);" class="btn btn-primary"><i class="fa fa-gear"></i> Icon Left</a> </li> <li> <a href="javascript:void(0);" class="btn btn-success"><i class="fa fa-gear"></i> Both Sides <i class="fa fa-gear"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-danger">Icon Right <i class="fa fa-gear"></i></a> </li> </ul> <ul class="demo-btns"> <li> <a href="javascript:void(0);" class="btn btn-default"><i class="fa fa-gear"></i> Icon Left</a> </li> <li> <a href="javascript:void(0);" class="btn btn-default"><i class="fa fa-gear"></i> Both Sides <i class="fa fa-gear"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default">Icon Right <i class="fa fa-gear"></i></a> </li> </ul> <hr class="simple"> <ul class="demo-btns"> <li> <div class="btn-group"> <button class="btn bg-color-blueDark txt-color-white"> <i class="fa fa-gear"></i> Drop Down </button> <button class="btn btn-primary dropdown-toggle"> <span class="caret"></span> </button> </div> </li> <li> <div class="btn-group"> <button class="btn bg-color-blueDark txt-color-white"> <i class="fa fa-gear"></i> Drop Down <i class="fa fa-gear"></i> </button> <button class="btn btn-success dropdown-toggle"> <span class="caret"></span> </button> </div> </li> <li> <div class="btn-group"> <button class="btn bg-color-blueDark txt-color-white"> Drop Down <i class="fa fa-gear"></i> </button> <button class="btn btn-danger dropdown-toggle"> <span class="caret"></span> </button> </div> </li> </ul> <ul class="demo-btns"> <li> <div class="btn-group"> <button class="btn btn-default"> <i class="fa fa-gear"></i> Drop Down </button> <button class="btn btn-default dropdown-toggle"> <span class="caret"></span> </button> </div> </li> <li> <div class="btn-group"> <button class="btn btn-default"> <i class="fa fa-gear"></i> Drop Down <i class="fa fa-gear"></i> </button> <button class="btn btn-default dropdown-toggle"> <span class="caret"></span> </button> </div> </li> <li> <div class="btn-group"> <button class="btn btn-default"> Drop Down <i class="fa fa-gear"></i> </button> <button class="btn btn-default dropdown-toggle"> <span class="caret"></span> </button> </div> </li> </ul> <hr class="simple"> <ul class="demo-btns"> <li> <a href="javascript:void(0);" class="btn btn-primary btn-xs"><i class="fa fa-gear"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default btn-sm"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-primary"><i class="fa fa-gear fa-lg"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-primary btn-lg"><i class="fa fa-gear fa-lg"></i></a> </li> </ul> <ul class="demo-btns"> <li> <a href="javascript:void(0);" class="btn btn-primary btn-xs"><i class="fa fa-gear"></i> <i class="fa fa-caret-down"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-default btn-sm"><i class="fa fa-gear fa-lg"></i> <i class="fa fa-caret-down"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-primary"><i class="fa fa-gear fa-lg"></i> <i class="fa fa-caret-down"></i></a> </li> <li> <a href="javascript:void(0);" class="btn btn-primary btn-lg"><i class="fa fa-gear fa-lg"></i> <i class="fa fa-caret-down"></i></a> </li> </ul> </div> <!-- end widget content --> </div> <!-- end widget div --> </div> <!-- end widget --> <!-- Widget ID (each widget will need unique ID)--> <div class="jarviswidget" id="wid-id-7" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-sortable="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-hand-o-up"></i> </span> <h2>Label Buttons </h2> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <!-- This area used as dropdown edit box --> </div> <!-- end widget edit box --> <!-- widget content --> <div class="widget-body"> <ul class="demo-btns"> <li> <a href="javascript:void(0);" class="btn btn-labeled btn-success"> <span class="btn-label"><i class="glyphicon glyphicon-ok"></i></span>Success </a> </li> <li> <a href="javascript:void(0);" class="btn btn-labeled btn-danger"> <span class="btn-label"><i class="glyphicon glyphicon-remove"></i></span>Cancel </a> </li> <li> <a href="javascript:void(0);" class="btn btn-labeled btn-warning"> <span class="btn-label"><i class="glyphicon glyphicon-bookmark"></i></span>Bookmark </a> </li> <li> <a href="javascript:void(0);" class="btn btn-labeled btn-primary"> <span class="btn-label"><i class="glyphicon glyphicon-camera"></i></span>Camera </a> </li> <li> <a href="javascript:void(0);" class="btn btn-labeled btn-default"> <span class="btn-label"><i class="glyphicon glyphicon-chevron-left"></i></span>Left </a> </li> <li> <a href="javascript:void(0);" class="btn btn-labeled btn-default"> <span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> Right </a> </li> <li> <a href="javascript:void(0);" class="btn btn-labeled btn-success"> <span class="btn-label"><i class="glyphicon glyphicon-thumbs-up"></i></span>Thumbs Up </a> </li> <li> <a href="javascript:void(0);" class="btn btn-labeled btn-danger"> <span class="btn-label"><i class="glyphicon glyphicon-thumbs-down"></i></span>Thumbs Down </a> </li> <li> <a href="javascript:void(0);" class="btn btn-labeled btn-info"> <span class="btn-label"><i class="glyphicon glyphicon-refresh"></i></span>Refresh </a> </li> <li> <a href="javascript:void(0);" class="btn btn-labeled btn-danger"> <span class="btn-label"><i class="glyphicon glyphicon-trash"></i></span>Trash </a> </li> <li> <a class="btn btn-success btn-labeled" href="javascript:void(0);"> <span class="btn-label"><i class="glyphicon glyphicon-info-sign"></i></span>Info Web </a> </li> </ul> <pre> <button type="button" class="btn btn-labeled btn-success"> <span class="btn-label"> <i class="glyphicon glyphicon-ok"></i> </>Success </button> </pre> </div> <!-- end widget content --> </div> <!-- end widget div --> </div> <!-- end widget --> <!-- Widget ID (each widget will need unique ID)--> <div class="jarviswidget" id="wid-id-9" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false" data-widget-sortable="false"> <!-- widget options: usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false"> data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-togglebutton="false" data-widget-deletebutton="false" data-widget-fullscreenbutton="false" data-widget-custombutton="false" data-widget-collapsed="true" data-widget-sortable="false" --> <header> <span class="widget-icon"> <i class="fa fa-hand-o-up"></i> </span> <h2>Block Buttons </h2> </header> <!-- widget div--> <div> <!-- widget edit box --> <div class="jarviswidget-editbox"> <!-- This area used as dropdown edit box --> </div> <!-- end widget edit box --> <!-- widget content --> <div class="widget-body"> <p> Block buttons <code> .btn .btn-block </code> </p> <div class="well"> <button type="button" class="btn btn-primary btn-lg btn-block"> Block level button </button> <button type="button" class="btn btn-default btn-sm btn-block"> Block level small button </button> <button type="button" class="btn btn-default btn-xs btn-block"> Block level extra small button </button> </div> <hr class="simple"> <p> Block group buttons <code> .btn-group .btn-group-justified </code> </p> <div class="well"> <div class="btn-group btn-group-justified"> <a href="javascript:void(0);" class="btn btn-default">Left</a> <a href="javascript:void(0);" class="btn btn-default">Middle</a> <a href="javascript:void(0);" class="btn btn-default">Right</a> </div> </div> </div> <!-- end widget content --> </div> <!-- end widget div --> </div> <!-- end widget --> </article> <!-- WIDGET END --> </div> <!-- end row --> <!-- row --> <div class="row"> </div> <!-- end row --> </section> <!-- end widget grid --> </div> <!-- END MAIN CONTENT -->